@mixin clearfix
  &:before,
  &:after
    content: ""
    display: table
  &:after
    clear: both

@mixin spinner($size: 16px, $color: #333, $border-width: 2px)
  width: rem($size)

  &:before,
  &:after
    position: absolute
    content: ''
    top: 50%
    left: 50%
    margin: rem($size / -2 0 0 $size / -2)
    width: rem($size)
    height: rem($size)
    border-radius: 100%
    border-color: $color transparent transparent
    border-style: solid
    border-width: $border-width
    box-shadow: 0 0 0 1px transparent

  &:before
    animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62)
    animation-iteration-count: infinite

  &:after
    animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8)
    animation-iteration-count: infinite
